<template>
	<view>
		<view class="newsItem" @tap="tochat">
			<view class="newsItem_head">
				<image :src="item.titlepic" mode="widthFix" lazy-load></image>
			</view>
			<view>
				<view class="newsItemFirst">
					<view>{{item.title}}</view>
					<view>{{item.date}}</view>
				</view>
				<view class="newsItemTwo">
					<view>{{item.desc}}</view>
					<view v-if="item.num>0">
						<uni-badge class="uni-badge-left-margin" :text="item.num" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniBadge from '@/components/common/uni-badge/uni-badge.vue';
	export default {
		props:['item'],
		data() {
			return{
				
			}
	},
	components: {
		uniBadge,
	},
	methods:{
		tochat(){
			uni.navigateTo({
				url: '../../pages/user-chat/user-chat',
			});
		}
	}	
		
	}
</script>

<style lang="scss" scoped>
	.newsItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 4upx solid #F8F8F8;
		padding: 20upx 0;
	
		.newsItem_head {
			flex-shrink: 0;
			width: 100upx;
			height: 100upx;
	
			image {
				width: 100%;
				height: 100%;
				border-radius: 100%;
				border: 1px solid #F8F8F8;
			}
		}
	
		&>view:nth-of-type(2) {
			flex: 1;
			margin-left: 20upx;
			display: flex;
			flex-direction: column;
	
			align-items: center;
	
			.newsItemFirst {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
	
				&>view:first-child {
					font-size: 35upx;
					font-weight: 500;
				}
	
				&>view:nth-of-type(2) {
					color: #CCCCCC;
					font-size: 25upx;
				}
			}
	
			.newsItemTwo {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
	
				&>view:first-child {
					color: #CCCCCC;
					font-size: 25upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 500upx;
				}
				.uni-badge-left-margin {
					background-color: #FF6434;
					color: #FFFFFF;
				}
			}
		}
	
	}
</style>
